<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* li{
            border: 1px solid black;
            list-style: none;            
        } */
    </style>
</head>
<body>
    <div id="wrap">
        <h2>模拟封装jQuery</h2>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </div>
    </div>
</body>
<script>

    // 构造函数
        function GetEle(selector) {

            this.eles = document.querySelectorAll(selector)
            
        }
    // html文字
        GetEle.prototype.html = function(con){
            if(arguments.length >= 1) {
                for(let i = 0; i < this.eles.length; i++){
                    this.eles[i].innerHTML = con;
                }
            } else {
                return this.eles[0].innerHTML;
            }
        }
    // 文本元素
        GetEle.prototype.text = function(con){
            if(arguments.length >= 1) {
                for(let i = 0; i < this.eles.length; i++){
                    this.eles[i].innerText = con;
                }
            } else {
                return this.eles[0].innerText;
            }
        }
    // 表单元素
        GetEle.prototype.val = function(con){
            if(arguments.length >= 1) {
                for(let i = 0; i < this.eles.length; i++){
                    this.eles[i].value = con;
                }
            } else {
                return this.eles[0].value;
            }
        }
    // 元素宽度
        GetEle.prototype.width = function(con){
            if(arguments.length >= 1) {
                for(let i = 0; i < this.eles.length; i++){
                    var unitReg = /^\d+(px|pt|vh|vw|em|%|rem)$/;
                    if(unitReg.test(con)) {       // 有单位 => 直接赋值
                        this.eles[i].style.width = con;
                    } else {
                        this.eles[i].style.width = con + "px";
                    }
                }
            } else {
                // return this.eles[0].style.width;
                return parseFloat(getStyle(this.eles[0],"width"));
            } 
        }
    // 元素高度
        GetEle.prototype.height = function(con){
            if(arguments.length >= 1) {
                for(let i = 0; i < this.eles.length; i++){
                    var unitReg = /^\d+(px|pt|vh|vw|em|%|rem)$/;
                    if(unitReg.test(con)) {       // 有单位 => 直接赋值
                        this.eles[i].style.height = con;
                    } else {
                        this.eles[i].style.height = con + "px";
                    }
                }
            } else {
                // return this.eles[0].style.height;
                return parseFloat(getStyle(this.eles[0],"height"));
            } 
        }
    // 元素样式 
        GetEle.prototype.css = function(attr,val){
            if(arguments.length >= 2) {
                for(let i = 0; i < this.eles.length; i++){
                    var ele = this.eles[i]
                    ele.style[attr] = val;
                }
            } else {
                if(typeof attr == "object") {
                    for(var key in attr) {
                        var val = attr[key];
                        this.css(key,val);
                    }
                }
                return this.getStyle(attr);
            } 
        }
    // 元素隐藏
        GetEle.prototype.hid = function(){
            for(let i = 0; i < this.eles.length; i++){
                this.eles[i].style.display = "none";
            } 
        } 
    // 元素显示
        GetEle.prototype.show = function(){
            for(let i = 0; i < this.eles.length; i++){
                this.eles[i].style.display = "block";
            }
        }
  
        GetEle.prototype.getStyle = function(attr) {
            var ele = this.eles[0];     //集合中的第一个元素
            try{
                return window.getComputedStyle(ele)[attr];
            } catch (err) {
                return window.currentStyle[attr];
            }
        }
        
        function getStyle (ele,attr) {
            try{
                return window.getComputedStyle(ele)[attr];
            } catch (err) {
                return window.currentStyle[attr];
            }
        }
        var $li = new GetEle(".list li"); 
        // 接收一个对象，批量设置 
        $li.text("hello world"); 
        $li.css({
            width:"100px",
            height:"100px",
            background:"#fde",
            border:"1px solid black",
            "line-height":"100px",
            "list-style" : "none",
        })
        // $li.width("400%");         
        // $li.height("100px"); 
        // $li.css("background","#fde");                                  
        // $li.css("line-height","100px");                                  
        // $li.css("border","1px solid black");                                  
        
        console.log($li.width());                   
        console.log($li.height());                   
        // console.log($li.css("background"));                   
        // console.log($li.css("border"));                   
        // $li.hid();          

        var $h2 = new GetEle("#wrap h2");
        $h2.html("嘿,下课了");


    
</script>
</html>